<template>
  <div class="mainContent">
    <a-spin :spinning="spinning">
      <div style="width: 90%; margin: 0 auto">
        <div v-if="agent.status == 'rejected'" style="text-align: center">
          <span style="color: red">审核不通过：{{ agent.remark }}</span>
        </div>
        <a-row>
          <a-col :xs="{ span: 24 }" :sm="{ span: 4 }" class="formGroupTitle"
            >基本信息</a-col
          >
        </a-row>
        <a-form style="margin-bottom: 20px" layout="inline">
          <!-- <a-form-item class="formItemWidth" v-bind="formItemLayout" label="Email">
            <span class="ant-form-text">{{member.email}}</span>
          </a-form-item> -->
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="手机号"
          >
            <span v-if="sensitive=='0'" class="ant-form-text">{{
                member.mobileNo
              }}</span>
              <span v-else class="ant-form-text">
                <a-hide-data
                  :params="{ type: 'mobileNo', value: member.mobileNo }"
                ></a-hide-data>
              </span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="客户类型"
          >
            <span class="ant-form-text" v-if="agent.merchantType == 'small'"
              >小微商户</span
            >
            <span class="ant-form-text" v-if="agent.merchantType == 'org'"
              >企业</span
            >
            <span class="ant-form-text" v-if="agent.merchantType == 'mer'"
              >个体户</span
            >
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="客户名称"
          >
            <span class="ant-form-text">{{ agent.merchantName }}</span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="客户简称"
          >
            <span class="ant-form-text">{{ agent.shortName }}</span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            v-if="this.agent.merchantType != 'small'"
            label="营业期限"
          >
            <span class="ant-form-text"
              >{{ agent.orgExpiryDateStart }}-{{ agent.orgExpiryDateEnd }}</span
            >
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="营业地址"
          >
            <span v-if="sensitive=='0'" class="ant-form-text"
              >{{ agent.realProvinceName }}-{{ agent.realCityName }}-{{
                agent.realDistrictName
              }}-{{ agent.realAddress }}</span
            >
            <span v-else class="ant-form-text">{{
                agent | otherfilter
              }}</span>
          </a-form-item>
          <a-form-item
            style="width: 50%"
            :label-col="{ span: 12 }"
            :wrapper-col="{ span: 11, offset: 1 }"
            label="社会统一信用代码/注册号"
            v-if="this.agent.merchantType != 'small'"
          >
            <span v-if="sensitive=='0'" class="ant-form-text">{{ agent.orgRegisterNo }}</span>
            <span v-else class="ant-form-text">{{ agent.orgRegisterNo | creditNoFilter  }}</span>
          </a-form-item>
          <div v-if="this.agent.merchantType != 'small'">
            <a-row>
              <a-col :xs="{ span: 24 }" :sm="{ span: 4 }" class="formGroupTitle"
                >法定代表人信息</a-col
              >
            </a-row>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="姓名"
            >
              <span v-if="sensitive=='0'" class="ant-form-text">{{
                legalIdentity.identityName
              }}</span>
              <span v-else class="ant-form-text">{{
                legalIdentity.identityName |nameFilter
              }}</span>
            </a-form-item>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="证件类型"
            >
              <span class="ant-form-text">身份证</span>
            </a-form-item>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="证件号码"
            >
              <span v-if="sensitive=='0'" class="ant-form-text">{{ legalIdentity.identityNo }}</span>
              <span v-else class="ant-form-text">
                  <a-hide-data
                    :params="{
                      type: 'idCard',
                      value: legalIdentity.identityNo,
                    }"
                  ></a-hide-data>
                </span>
            </a-form-item>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="证件有效期"
            >
              <span class="ant-form-text">{{ legalIdentity.expiryDate }}</span>
            </a-form-item>
          </div>
          <div v-if="this.agent.merchantType == 'small'">
            <a-row>
              <a-col :xs="{ span: 24 }" :sm="{ span: 4 }" class="formGroupTitle"
                >申请人信息</a-col
              >
            </a-row>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="姓名"
            >
              <span v-if="sensitive=='0'" class="ant-form-text">{{
                smallIdentity.identityName
              }}</span>
              <span v-else class="ant-form-text">{{
                smallIdentity.identityName |nameFilter
              }}</span>
            </a-form-item>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="证件类型"
            >
              <span class="ant-form-text">身份证</span>
            </a-form-item>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="证件号码"
            >
              <span v-if="sensitive=='0'" class="ant-form-text">{{ smallIdentity.identityNo }}</span>
              <span v-else class="ant-form-text">
                  <a-hide-data
                    :params="{
                      type: 'idCard',
                      value: smallIdentity.identityNo,
                    }"
                  ></a-hide-data>
                </span>
            </a-form-item>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="证件有效期"
            >
              <span class="ant-form-text">{{ smallIdentity.expiryDate }}</span>
            </a-form-item>
          </div>

          <div v-if="this.agent.merchantType != 'small'">
            <a-row>
              <a-col :xs="{ span: 24 }" :sm="{ span: 4 }" class="formGroupTitle"
                >联系人信息</a-col
              >
            </a-row>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="姓名"
            >
            <span v-if="sensitive=='0'" class="ant-form-text">{{ agent.contactName }}</span>
              <span v-else class="ant-form-text">{{ agent.contactName |nameFilter}}</span>
            </a-form-item>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="联系电话"
            >
              <span v-if="sensitive=='0'" class="ant-form-text">{{ agent.contactPhone }}</span>
              <span v-else class="ant-form-text">{{ agent.contactPhone |phoneFilter}}</span>
            </a-form-item>
            <a-form-item
              class="formItemWidth"
              v-bind="formItemLayout"
              label="Email"
            >
              <span v-if="sensitive=='0'" class="ant-form-text">{{ agent.contactEmail }}</span>
              <span v-else class="ant-form-text">
                  <a-hide-data
                    :params="{ type: 'email', value: agent.contactEmail }"
                  ></a-hide-data>
                </span>
            </a-form-item>
          </div>

          <a-row>
            <a-col :xs="{ span: 24 }" :sm="{ span: 4 }" class="formGroupTitle"
              >结算账户信息</a-col
            >
          </a-row>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="账户类型"
          >
            <span class="ant-form-text" v-if="bankCard.isPrivate == false"
              >对公</span
            >
            <span class="ant-form-text" v-if="bankCard.isPrivate == true"
              >对私</span
            >
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="账户名称"
          >
            <span v-if="sensitive=='0'" class="ant-form-text">{{ bankCard.accountName }}</span>
            <span v-else class="ant-form-text"
                ><span v-if="bankCard.isPrivate">
                  <a-hide-data
                    :params="{ type: 'idName', value: bankCard.accountName }"
                  ></a-hide-data></span
                ><span v-if="!bankCard.isPrivate">{{
                  bankCard.accountName | accountfilter
                }}</span></span
              >
          </a-form-item>
          <a-form-item class="formItemWidth"></a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="开户行名称"
          >
            <span class="ant-form-text">{{ bankCard.bankName }}</span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="开户行所在地"
          >
            <span class="ant-form-text"
              >{{ bankCard.province }}-{{ bankCard.city }}</span
            >
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="支行名称"
          >
            <span class="ant-form-text">{{ bankCard.bankBranchName }}</span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="账号"
          >
            <span v-if="sensitive=='0'" class="ant-form-text">{{ bankCard.cardNo }}</span>
            <span v-else class="ant-form-text">
                <a-hide-data
                  :params="{ type: 'bankCard', value: bankCard.cardNo }"
                ></a-hide-data>
              </span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="预留银行手机号"
          >
            <span v-if="sensitive=='0'" class="ant-form-text">{{ bankCard.mobileNo }}</span>
            <span v-else class="ant-form-text">{{
                bankCard.mobileNo | phoneFilter
              }}</span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="持卡人身份证"
          >
            <span v-if="sensitive=='0'" class="ant-form-text">{{ legalIdentity.identityNo }}</span>
            <span v-else class="ant-form-text">
                  <a-hide-data
                    :params="{
                      type: 'idCard',
                      value: legalIdentity.identityNo,
                    }"
                  ></a-hide-data>
                </span>
          </a-form-item>

          <a-row>
            <a-col :xs="{ span: 24 }" :sm="{ span: 4 }" class="formGroupTitle"
              >业务配置</a-col
            >
          </a-row>
          <a-row>
            <a @click="aClick(agent.memberNo)" href="javascript:false;void(0);"
              >查看费率信息</a
            >
          </a-row>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="分润比例"
          >
            <span class="ant-form-text">{{ agent.profitPercent }}%</span>
          </a-form-item>
          <a-form-item
            class="formItemWidth"
            v-bind="formItemLayout"
            label="分润结算方式"
          >
            <span class="ant-form-text" v-if="agent.profitSettleType == 'self'"
              >结算本级</span
            >
            <span
              class="ant-form-text"
              v-if="agent.profitSettleType == 'higher'"
              >结算上级</span
            >
          </a-form-item>
          <a-row>
            <a-button type="primary" :loading="loading" @click="download"
              >下载附件</a-button
            >
          </a-row>
        </a-form>
        <div
          v-if="
            agent.statusName == '审核失败' || agent.statusName == '审核不通过'
          "
          style="text-align: center"
        >
          <a-button
            type="primary"
            style="width: 8vw"
            @click="goModification"
            size="large"
            >修改</a-button
          >
        </div>
      </div>
    </a-spin>
    <a-modal
      @ok="handleOk"
      @cancel="handleCancel"
      :visible="modalVisible"
      :footer="null"
      width="650px"
    >
      <div>
        <agent-rate-view
          :MerRateList="MerRateList"
          ref="getMerRateData"
        ></agent-rate-view>
        <AddedFunctionLists :memberNo="memberNo" v-if="memberNo" />
      </div>
    </a-modal>
  </div>
</template>

<script>



import { message } from "ant-design-vue";
import api from "@/common/api";
import { error } from "util";
import { fail } from "assert";
import AHideData from "../../common/HideData";
import AgentRateView from "../../common/AgentRateView";
import AddedFunctionLists from "@/components/AddedFunction/AddedFunctionLists";
export default {
  components: {
    AHideData,
    AgentRateView,
    AddedFunctionLists,
  },
  data() {
    return {
      memberNo: "", // 会员编号
      MerRateList: null,
      iconLoading: false,
      loading: false,
      modalVisible: false,
      spinning: false,
      queryDetail: {},
      smallIdentity: {},
      agent: {},
      bankCard: {},
      member: {},
      attachRequest: {},
      legalIdentity: {},
      ratelist: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15, offset: 1 },
          md: { span: 15, offset: 1 },
        },
      },
      sensitive:localStorage.getItem("sensitive")
    };
  },
  watch: {},
  computed: {},
  filters: {
    creditNoFilter(value) {
      if (value) {
        var len = value.length;
        var firstStr = value.substr(0, 1);
        var lastStr = value.substr(-1);
        var middleStr = value
          .substring(1, len - Math.abs(-1))
          .replace(/[\s\S]/gi, "*");
        var tempStr = firstStr + middleStr + lastStr;
        return tempStr;
      }
    },
    nameFilter(value) {
      if (value) {
        var reg = /^./;
        return value.replace(reg, "*");
      }
    },
    phoneFilter(value) {
      if (value) {
        var reg = /^(\d{3})\d{4}(\d{4})$/;
        return value.replace(reg, "$1****$2");
      }
    },
    accountfilter(value) {
      if (value) {
        let len = value.length - 2;
        let arr = [];
        for (let i = 0; i < len; i++) {
          let item = "*";
          arr.push(item);
        }
        let arrstring = arr.join("");
        return (
          value.substring(0, 1) +
          arrstring +
          value.substring(value.length - 1)
        );
      }
    },
    otherfilter(value) {
      if (value.realProvinceName) {
        let data =
          value.realProvinceName +
          "-" +
          value.realCityName +
          "-" +
          value.realDistrictName +
          "-" +
          value.realAddress;
        let len = data.length - 2;
        let arr = [];
        for (let i = 0; i < len; i++) {
          let item = "*";
          arr.push(item);
        }
        let arrstring = arr.join("");
        return (
          data.substring(0, 1) + arrstring + data.substring(data.length - 1)
        );
      }
    },
  },
  mounted() {
    let id = this.$route.params.id;
    this.getQueryDetail(id);
  },
  methods: {
    goModify() {
      this.query.verCode = null;
      this.visible = true;
    },
    getQueryDetail(id) {
      this.$axios.get("/agent/logAgent/detail/" + id).then(
        (res) => {
          console.log(res);
          if (res.data.code == "OK") {
            this.queryDetail = res.data.data;

            this.agent = res.data.data.agent;

            this.bankCard = res.data.data.bankCard;
            this.member = res.data.data.member;
            this.attachRequest = res.data.data.attachRequest;
            if (this.agent.merchantType == "small") {
              this.smallIdentity = res.data.data.smallIdentity;
            } else {
              this.legalIdentity = res.data.data.legalIdentity;
            }
          }
        },
        (err) => {}
      );
    },
    orgSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          api.coustromsendPhoneOrg(this.query, (res) => {
            if (res.code == "OK") {
              this.visible = false;
              this.$router.push("/org/infoset/allinfoChange");
            } else {
              this.$message.warning(res.message);
            }
          });
        }
      });
    },
    handleOk(e) {
      setTimeout(() => {
        this.modalVisible = false;
      }, 2000);
    },
    handleCancel(e) {
      this.modalVisible = false;
    },
    goModification() {
      if (this.agent.merchantType == "small") {
        this.$router.push({
          name: "/Partners/userTypeB/step1",
          params: {
            queryid: this.agent.id,
            memberNo: this.agent.memberNo,
          },
        });
      } else {
        this.$router.push({
          name: "/Partners/userTypeA/step1",
          params: {
            queryid: this.agent.id,
            memberNo: this.agent.memberNo,
          },
        });
      }
    },

    aClick(memberNo) {
      this.modalVisible = true;
      this.memberNo = memberNo;
      this.$axios.get("/agent/logAgent/fetch/fee/" + memberNo).then((res) => {
         if (res.data.code == "OK") {
             this.MerRateList = res.data.data.fee ;
         }
       
      });
    },
    download() {
      this.loading = true;
      this.$axios.post("/file/file/attach", this.attachRequest).then(
        (res) => {
          this.loading = false;
          if (res.data.data != null) {
            window.location.href = res.data.data;
          } else {
            this.$message.error("附件不存在");
          }
        },
        (err) => {
          this.loading = false;
          this.$message.error(err.message);
        }
      );
    },
  },
};
</script>

<style lang="less" scoped>
.card_sty {
  margin-bottom: 30px;
}
/deep/.noExpand {
  .ant-table-row-expand-icon {
    display: none;
  }
}
.mainContent {
  overflow-y: scroll;
  height: 100%;
  padding: 30px;
}

/* 滚动条样式 */
.mainContent::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  scrollbar-arrow-color: red;
}

.mainContent::-webkit-scrollbar-thumb {
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
  scrollbar-arrow-color: red;
}

.mainContent::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}

span {
  cursor: pointer;
}

.formItemWidth {
  width: 30%;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 12px;
  margin-top: 15px;
  text-align: left;
  /* margin-left: 20px; */
}

.ant-card-head-title {
  padding: 12px 0 !important;
}

.ant-card-grid {
  padding: 12px;
}

.ant-card-head {
  background: transparent;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 24px;
  border-radius: 2px 2px 0 0;
  zoom: 1;
  margin-bottom: -1px;
  min-height: 45px !important;
  font-size: 16px;
  color: #52506b;
  font-weight: 400;
  display: flex;
}

.ant-card .ant-card-grid:nth-child(4n + 1),
.ant-card .ant-card-grid:nth-child(4n + 2) {
  background: #f7f9fc;
}

.ant-card-grid:hover {
  /* box-shadow: none; */
  box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8,
    1px 0 0 0 #e8e8e8 inset, 0 1px 0 0 #e8e8e8 inset;
}

.modalClass {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 40px;
  padding-bottom: 20px;
}

.modalClass h4 {
  color: #29a576;
  font-size: 22px;
  font-weight: 400;
  margin-top: 15px;
  margin-bottom: 25px;
}

.modalClass p {
  margin-bottom: 10px;
}
</style>
